<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="0"> 
<title>源辰信息-后台管理</title>
<link rel="shortcut icon" type="image/x-icon" href="images/yc.png"/>
<link href="css/login.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 

<div class="login" id="app">
    <div class="message">零食网-用户登录</div>
    <div id="darkbannerwrap"></div>
    <form id="myform">
    	<select name="role" id="role">
    		<option value="1">超级管理员</option>
    		<option value="1">普通管理员</option>
    	</select>
		<hr class="hr15">
		<input name="account" id="account" placeholder="账号" required type="text" value="navy"
		v-model ="account" @blur="checkInfo(0)">
		<hr class="hr15">
		<input name="password" id="pwd" placeholder="密码" required type="password" value="123321"
		v-model ="pwd" @blur="checkInfo(1)">
		<hr class="hr15">
		<span id="waring-info" style="color:red"></span>
		<hr class="hr15">
		<input value="登录" style="width:100%;" type="button" @click='login()'>
		<hr class="hr20">
	</form>
	<div id="adminOp">
		 <div><span style="color: red">{{info}}</span></div>
		<a href="pwd.html">忘记密码</a>
		<a href="reg.html">注册账号</a>
	</div>
</div>

<div class="copyright">衡阳市源辰信息科技有限公司 &copy; <a href="http://www.hyycinfo.com" target="_blank">后台管理系统</a></div>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script type="text/javascript">
//构建Vue实例
let vm = new Vue({
	el :"#app",
	data : {
		account: "navy",
		pwd:"098010",
		status:[false, false], //账户 密码格式标记
		info:"",
	},
	//此时Vue实例初始化完成 DOM挂载完成 可以直接操作DOM
	methods : {
		checkInfo( flag ){
			let correct = false; //默认标识
			switch(flag){
				case 0:  //说明是账号验证
					let reg1 = /^1[3-9]\d{9}$/; //手机号码    /^1(3|4|5|6|7|8|9)\d{9}$/
					let reg2 = /^[\u4e00-\u9fff\w]{2,16}$/;//匹配所有中日韩非符号字符
					let reg3 = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;//验证邮箱格式
					//验证正则表达式
					if( !(reg1.test( this.account) || reg2.test( this.account) || reg3.test( this.account))){ //验证失败
						this.info="账号格式错误，请重新输入";
						this.account = "";
						correct = false;
					}else{
						correct = true;
					}
					break;
				case 1: //验证密码
					let reg4 = /^[\w@!%]{6,15}$/;  //switch 变量不能重复
					if( !(reg4.test(this.pwd))){
						this.info="密码格式错误，请重新输入";
						this.pwd = "";
						correct = false;
					}else{
						correct = true;
					}
					break;
				
			default:
				this.info="验证失败，请重新输入";
			}
			//vue修改数据
			Vue.set(this.status, flag, correct); //vm.$set
		},		
		clearMsg(){ //清空提示
			this.info="";
		},
		login : function() { //登录事件@click="login"
			console.log(this.status);
			if( $.inArray( false, this.status) > 0){//只要一下项没通过 就无法进行登录
				this.info="宁输入的信息有误，请重新输入";
				return;
			}

			//登录请求
			axios.post( "../mem/login", qs.stringify({nickName: this.account, pwd: this.pwd, realName: this.code})).then(result =>{
				if( !result.status == 200){ //请求不成功
					this.info ='请求失败请检查您的网络';
				 	return;
				}
				
				if(result.data.code == 200){  //登录成功
					//获取来源地址 即 ： 哪个页面连接过来将来登录成功直接返回该页面
					let temp = document.referrer;
				
					if( "" == temp || temp.indexOf( "register.html")){
						location.href = "manager/index.html";
						return;
					}
					location.href = temp;
					return;
				}
				if(result.data.code == 500){ 
					this.info ='账号或密码错误，请确认后重新输入';
				}
				this.status =[false, false];
				})
			}
		}
	})
	

</script>

</body>
</html>